<template>
  <div class="wrap">
    <!--  使用和transtion完全一样 -->
    <transition-group
      tag="session"
      class="content"
      enter-active-class="animate__animated animate__rubberBand"
      leave-active-class="animate__animated animate__bounceOutDown"
    >
      <div class="items" v-for="item in list" :key="item">{{ item }}</div>
    </transition-group>
    <div>
      <button @click="push">push</button>
      <button @click="pop">push</button>
    </div>
  </div>
  <hr />
  <!-- 状态过度 -->
  <div>
    <input step="20" v-model="num.current" type="number" />
    <div>{{ num.tweenedNumber.toFixed(0) }}</div>
  </div>
</template>

<script lang="ts" setup>
import "animate.css";

import gsap from 'gsap'
import { reactive,watch  } from "vue";
let list = reactive<number[]>([1, 2, 3, 4, 5]);
const push = () => {
  list.push(list.length);
};
const pop = () => {
  list.pop();
};


const num = reactive({
    tweenedNumber: 0,
    current:0
})
 
watch(()=>num.current, (newVal) => {
    gsap.to(num, {
        duration: 1,
        tweenedNumber: newVal
    })
})

</script>

<style scoped>
.content {
  border: 1px solid red;
  display: flex;
}
.item {
  margin: 10px;
}
</style>